<template>
	<view class="main-page" style="align-items: center;">
		<image class="bg-header" src="../../static/mine/bg_header_mine.png"></image>
		<view class="title-container">
			<text class="font-333-36" style="font-weight: 600;">我的</text>
		</view>
		<view class="info-box">
			<view class="member-box" @click="clickUpdateMember">
				<text class="font-9d552d-22" 
				style="padding-left: 12rpx;padding-right: 12rpx;font-weight: 600;">非会员</text>
				<text class="member-btn">升级</text>
			</view>
			
			<view class="row-container">
				<image class="avatar" src="../../static/mine/ic_default_avatar.png"></image>
				<view class="column-container">
					<text class="font-333-36" style="font-weight: 600;">小茹有人</text>
					<view class="row-container" style="margin-top: 6rpx;">
						<text class="font-999-26">绑定手机号</text>
						<image class="arrow" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</view>
			</view>
			
			<view class="row-container" style="width: 100%;margin-top: 30rpx;">
				<view class="column-container-center" style="width: 50%;height: 87rpx;">
					<text class="font-333-40" style="font-weight: 600;">12</text>
					<text class="font-333-24">会员余额(元)</text>
				</view>
				<view class="column-container-center" style="width: 50%;height: 87rpx;">
					<text class="font-333-40" style="font-weight: 600;">320.5</text>
					<text class="font-333-24">累计收益(元)</text>
				</view>
			</view>
			
			<view class="info-bottom">
				<image class="bottom-bg" src="../../static/mine/bg_info_bottom.png"></image>
				<text class="font-fff-26" style="margin-left: 24rpx;font-weight: 600;z-index: 50;">我的餐补(近7天)</text>
				<text class="font-fff-26" style="margin-right: 24rpx;font-weight: 600;z-index: 50;">订单核销率100%，每天可抢3单</text>
			</view>
		</view>
		
		<view class="order-box">
			<view class="single-order-box" @click="gotoOrderList(0)">
				<image class="order-img" src="../../static/mine/ic_order_wait_commit.png"></image>
				<text class="font-333-28">待提交</text>
			</view>
			<view class="single-order-box" @click="gotoOrderList(1)">
				<image class="order-img" src="../../static/mine/ic_order_wait_audit.png"></image>
				<text class="font-333-28">待返现</text>
			</view>
			<view class="single-order-box" @click="gotoOrderList(2)">
				<image class="order-img" src="../../static/mine/ic_order_done.png"></image>
				<text class="font-333-28">已返现</text>
			</view>
			<view class="single-order-box" @click="gotoOrderList(3)">
				<image class="order-img" src="../../static/mine/ic_order_cancel.png"></image>
				<text class="font-333-28">已失效</text>
			</view>
		</view>
		
		<view class="enterance-box">
			<view class="row-container-row-between" style="width: 100%;" @click="gotoApplyShop">
				<view class="row-container">
					<image class="enterance-img" src="../../static/mine/ic_mine_shop.png"></image>
					<text class="font-333-32">商家入驻</text>
				</view>
				<view class="row-container">
					<text class="font-999-28">我要入驻</text>
					<image class="enterance-arrow" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</view>
			
			<view class="row-container-row-between" style="width: 100%;margin-top: 26rpx;">
				<view class="row-container">
					<image class="enterance-img" src="../../static/mine/ic_mine_share.png"></image>
					<text class="font-333-32">分享给好友</text>
				</view>
				<view class="row-container">
					<text class="font-999-28">详情咨询客服</text>
					<image class="enterance-arrow" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</view>
			
			<view class="row-container-row-between" style="width: 100%;margin-top: 26rpx;" @click="gotoFriends">
				<view class="row-container">
					<image class="enterance-img" src="../../static/mine/ic_mine_team.png"></image>
					<text class="font-333-32">我的朋友</text>
				</view>
				<view class="row-container">
					<text class="font-999-28">10人</text>
					<image class="enterance-arrow" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</view>
			
			<view class="row-container-row-between" style="width: 100%;margin-top: 26rpx;" @click="gotoWithdraw">
				<view class="row-container">
					<image class="enterance-img" src="../../static/mine/ic_mine_withdraw.png"></image>
					<text class="font-333-32">提现申请</text>
				</view>
				<view class="row-container">
					<text class="font-999-28">会员余额申请提现</text>
					<image class="enterance-arrow" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</view>
			
			<view class="row-container-row-between" style="width: 100%;margin-top: 26rpx;" @click="gotoQuestion">
				<view class="row-container">
					<image class="enterance-img" src="../../static/mine/ic_mine_qa.png"></image>
					<text class="font-333-32">使用教程</text>
				</view>
				<image class="enterance-arrow" src="../../static/common/ic_arrow_right.png"></image>
			</view>
			
			<view class="row-container-row-between" style="width: 100%;margin-top: 26rpx;">
				<view class="row-container">
					<image class="enterance-img" src="../../static/mine/ic_mine_service.png"></image>
					<text class="font-333-32">联络客服</text>
				</view>
				<image class="enterance-arrow" src="../../static/common/ic_arrow_right.png"></image>
			</view>
		</view>
		
		<view class="row-container" style="width: 100%;height: 100%;">
			<MemberWindow ref="memberWindowRef"></MemberWindow>
		</view>
		
		<view class="row-container" style="width: 100%;height: 100%;">
			<MemberInfoWindow ref="memberInfoWidnowRef"></MemberInfoWindow>
		</view>
		
	</view>
</template>

<script>
	import MemberWindow from '../../components/MemberWindow.vue'
	import MemberInfoWindow from '../../components/MemberInfoWindow.vue'
	
	export default {
		data() {
			return {
				
			}
		},
		
		components:{
			MemberWindow,
			MemberInfoWindow
		},	
		
		methods: {
			clickUpdateMember(){
				// if (this.$refs.memberWindowRef){
				// 	this.$refs.memberWindowRef.showMemberWindow = true
				// }
				if (this.$refs.memberInfoWidnowRef){
					this.$refs.memberInfoWidnowRef.showMemberInfoWindow = true
				}
			},
			
			gotoFriends(){
				uni.navigateTo({
					url:'./friends'
				})
			},
			
			gotoWithdraw(){
				uni.navigateTo({
					url:'./withdraw'
				})
			},
			
			gotoQuestion(){
				uni.navigateTo({
					url:'./question'
				})
			},
			
			gotoApplyShop(){
				uni.navigateTo({
					url:'./applyShop'
				})
			},
			
			gotoOrderList(index){
				uni.$emit("switchOrderList" , index)
				uni.switchTab({
					url:'/pages/order/index'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.bg-header{
		width: 100%;
		height: 546rpx;
		position: absolute;
	}
	.title-container{
		width: 100%;
		height: 88rpx;
		margin-top: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	.info-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		background: white;
		border-radius: 16rpx;
		padding-top: 30rpx;
		position: relative;
		
		.member-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(100.34deg, #F7D99D 0%, #E08C50 100%);
			position: absolute;
			top: 35rpx;
			right: 24rpx;
			border-radius: 22rpx;
			height: 40rpx;
			
			.member-btn{
				background: linear-gradient(100.34deg, #FF6565 0%, #FC4444 100%);
				border: white solid 1rpx;
				width: 73rpx;
				height: 38rpx;
				text-align: center;
				line-height: 38rpx;
				font-weight: 600;
				color: #FFFCDC;
				font-size: 22rpx;
				border-radius: 20rpx;
			}
			
		}

		.avatar{
			width: 92rpx;
			height: 92rpx;
			margin-right: 24rpx;
			margin-left: 24rpx;
			border-radius: 46rpx;
		}
		
		.arrow{
			width: 18rpx;
			height: 18rpx;
		}
		
		.info-bottom{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 76rpx;
			margin-top: 30rpx;
			position: relative;
			
			.bottom-bg{
				width: 100%;
				height: 100%;
				position: absolute;
			}
			
		}
		
	}
	
	.order-box{
		display: flex;
		flex-direction: row;
		width: calc(100% - 60rpx);
		padding: 30rpx 0rpx;
		background: white;
		margin-top: 20rpx;
		border-radius: 16rpx;
		
		.single-order-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 137rpx;
			
			.order-img{
				width: 86rpx;
				height: 86rpx;
				margin-bottom: 12rpx;
			}
			
		}
	}
	
	.enterance-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 120rpx);
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background: white;
		border-radius: 16rpx;
		
		.enterance-img{
			width: 66rpx;
			height: 66rpx;
			margin-right: 10rpx;
		}
		
		.enterance-arrow{
			width: 24rpx;
			height: 24rpx;
		}
		
	}
	
	
	
	
	
	
</style>
